<template>
    <dialog-info ref="refDetailDialog" :isShowFotter="false">
        <!-- 标题 -->
        <template #DialogTitle>
            <span>投诉列表</span>
        </template>

        <!-- 内容 -->
        <template #DialogContainer>
            <div class="container">
                <el-form :model="queryParams" ref="queryRef" :inline="true">
                    <el-form-item label="日期">
                        <el-date-picker v-model="queryParams.dateString" type="date" placeholder="请选择日期"
                            :shortcuts="shortcuts" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </el-form-item>
                    <el-form-item label="所属区县：" prop="county">
                        <el-select v-model="queryParams.county" placeholder="请选择所属区县" clearable style="width: 240px">
                            <el-option v-for="dict in nhp_county_type" :key="dict.value" :label="dict.label"
                                :value="dict.value" clearable />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="投诉类别" prop="category">
                        <!-- <el-input v-model="queryParams.category" placeholder="请输入投诉类别" clearable style="width: 240px" /> -->
                        <el-select v-model="queryParams.category" clearable>
                            <el-option label="4GVOLTE" value="4GVOLTE" />
                            <el-option label="4G上网" value="4G上网" />
                            <el-option label="5G上网" value="5G上网" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="网络制式">
                        <el-radio-group v-model="queryParams.networkFormat">
                            <el-radio label="all">全部</el-radio>
                            <el-radio label="4G">4G</el-radio>
                            <el-radio label="5G">5G</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    </el-form-item>
                </el-form>

                <el-table :data="tableData" stripe height="65vh" v-loading="loading">
                    <el-table-column type="index" width="50" label="#" align="center" />

                    <el-table-column prop="stationNo" label="站名" min-width="200" align="center">
                        <template #default="scope">
                            <span>{{ scope.row.stationNo ? scope.row.stationNo : '-' }}</span>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="complaintId" label="投诉ID" width="80" /> -->
                    <el-table-column prop="csId" label="投诉ID" width="200" />
                    <el-table-column prop="networkFormat" label="网络制式" width="80" />
                    <el-table-column prop="category" label="投诉类别" width="85" align="center" />
                    <el-table-column prop="subCategory" label="投诉子类别" width="120" align="center" />
                    <el-table-column prop="district" label="区县" width="80" />
                    <el-table-column label="分发时间" width="230">
                        <template #default="scope">
                            {{ getFormulateDate(scope.row.dispatchTime) }}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="cgi" label="cgi" align="center" width="200" /> -->
                    <el-table-column prop="cgi" label="cgi" align="center" width="200">
                        <template #default="scope">
                            <span>{{ scope.row.cgi ? scope.row.cgi : '-' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="故障分析" width="80">
                        <template #default="scope">
                            <span style='color: #cfa4ff'>
                                {{ scope.row.alarmResult ? getAnalysisNum(scope.row.alarmResult) : '-' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="高干扰分析" width="95">
                        <template #default="scope">
                            <span style='color: #409eff'>
                                {{ scope.row.interferenceResult ? getAnalysisNum(scope.row.interferenceResult) : '-' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="性能分析" width="80">
                        <template #default="scope">
                            <span style='color: #409eff'>
                                {{ scope.row.performanceResult ? getAnalysisNum(scope.row.performanceResult) : '-' }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="高负荷分析" width="95">
                        <template #default="scope">
                            <span style='color: #e2aa53'>
                                {{ scope.row.interferenceResult ? getAnalysisNum(scope.row.interferenceResult) : '-' }}
                            </span>
                        </template>
                    </el-table-column>

                    <el-table-column fixed="right" label="操作" align="center" width="80">
                        <template #default="scope">
                            <el-button size="large" link type="primary" circle icon="Aim"
                                @click="aimPosition(scope.row)" />
                        </template>
                    </el-table-column>
                </el-table>
                <pagination class="dialog_pagination" v-show="total > 0" :total="total"
                    v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
                    @pagination="setComplainDetailData" />
            </div>
        </template>
    </dialog-info>
</template>

<script setup>
import { ref } from 'vue'
// import DetailDialog from "@/components/OpenlayerBaseMap/components/DetailDialog.vue";
// api相关 - 工具
import { apiCommon, getFormulateDate } from "@/utils/index.js";
import * as complainApi from "@/api/complain/complain";
import { complainDataStore } from '@/store/modules/complain.js'  // store

const complainStoreData = complainDataStore()

const { proxy } = getCurrentInstance();
const { nhp_county_type, nhp_network_type } = proxy.useDict(
    "nhp_county_type",
);

const shortcuts = [
    {
        text: "Today",
        value: new Date(),
    },
    {
        text: "Yesterday",
        value: () => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            return date;
        },
    },
    {
        text: "A week ago",
        value: () => {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            return date;
        },
    },
];

const refDetailDialog = ref(null);
const tableData = ref([]);

let loading = ref(true)

const emit = defineEmits(['setAutoPopup'])

const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    networkFormat: 'all',
    // dateString: complainStoreData.complainTime,
})

const total = ref(0);

/**
 * 业务
 */
const show = (val) => {
    // console.log('show', val)

    if (val) {
        queryParams.value.county = val.county

        if (val.type !== '区县' && val.type !== '投诉量') {
            queryParams.value.category = val.type
        } else {
            queryParams.value.category = ''
        }
    } else {
        queryParams.value.county = ''
        queryParams.value.category = ''
    }

    refDetailDialog.value.show();

    queryParams.value.dateString = complainStoreData.complainTime

    setComplainDetailData();
};

const getAnalysisNum = val => {
    if (!val) {
        return ''
    }

    const num = eval(val).length

    if (num === 0) {
        return eval(val).length
    }

    // return eval(val).length + '个'
    return eval(val).length
}

const setComplainDetailData = async () => {
    loading.value = true

    let params = JSON.parse(JSON.stringify(queryParams.value))

    if (params.networkFormat === 'all') {
        params.networkFormat = undefined
    }
    if (params.county === '') {
        params.county = undefined
    }
    if (params.category === '') {
        params.category = undefined
    }
    // console.log("搜索参数", params)

    let complaintList = await apiCommon(complainApi.queryComplaintListByPage, params);
    // console.log(complaintList)

    total.value = complaintList.total
    // console.log(total.value)

    tableData.value = complaintList.rows;
    // console.log(tableData.value)

    loading.value = false
}

const aimPosition = (row) => {
    console.log('aimPosition', row)

    if (row.longitude && row.latitude) {
        refDetailDialog.value.hide();

        emit('setAutoPopup', row)

        setTimeout(() => {
            refDetailDialog.value.show();
        }, 3000)

        return
    }

    proxy.$modal.msgWarning(`经纬度数据有误,无法跳转`);

    /* refDetailDialog.value.hide();

    emit('setAutoPopup', row)

    setTimeout(() => {
        refDetailDialog.value.show();
    }, 3000) */
}

// 搜索
const handleQuery = () => {
    // console.log('搜索', queryParams.value)

    setComplainDetailData()
}

defineExpose({
    show,
});
</script>